<template>
  <div class="flex-col duration-700 w-56 h-full p-8 text-gray-400 <sm:w-20 <sm:border-r <sm:border-barborder">
    <div
      class="logo flex sm:hidden duration-700 w-8 h-8 rounded-1/2 bg-green-400 text-light-50 items-center justify-center"
    >S</div>
    <a
      href="#"
      class="logo-expand <sm:hidden duration-700 sticky top-0 text-xl text-light-50 font-semibold no-underline"
    >skateboard</a>
    <div class="side-warpper py-9 w-36 border-b-1 <sm:w-7.5">
      <div class="side-title <sm:hidden duration-1300 text-xs mb-6">MENU</div>
      <div class="side-menu flex-col">
        <router-link
          class="sidebar-link group flex items-center no-underline mt-6 hover:font-semibold hover:text-light-50"
          :class="{active:currentMenuIndex==index}"
          :to="item.to"
          v-for="(item,index) in menuData"
          :key="index"
          @click="onChangeMenuIndex(index)"
        >
          <span
            class="iconify w-8 h-8 p-2 mr-4 <sm:mr-7.5 rounded-lg flex-shrink-0 bg-blue-300 group-hover:bg-purple-500"
            :data-icon="item.icon"
            data-inline="false"
          ></span>
          <span class="<sm:hidden duration-700">{{ item.name }}</span>
        </router-link>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, reactive } from 'vue-demi';
import { useRouter } from 'vue-router';

let currentMenuIndex = ref(0);
const onChangeMenuIndex = (index) => {
  currentMenuIndex.value = index
}

const router = useRouter();
router.push({path: '/Discover'});

const menuData = reactive([
  {
    name: "Discover",
    icon: "ri:compass-discover-line",
    to: "/Discover"
  }, {
    name: "Trending",
    icon: "ic:baseline-trending-up",
    to: "/Trending"
  }, {
    name: "Streaming",
    icon: "cil:stream",
    to: "/Streaming"
  }, {
    name: "Playlist",
    icon: "mdi:playlist-music",
    to: "/Playlist"
  }, {
    name: "Bookmark",
    icon: "ph:book-bookmark-fill",
    to: "/Bookmark"
  }
])
</script>


<style lang="scss" scoped>
.active {
  @apply font-semibold text-light-50
}
.active > svg {
  @apply bg-purple-500
}
</style>